Component({
  options: {
    addGlobalClass: true
  },

  properties: {
    seconds: {
      type: Number,
      value: 0
    },
    running: {
      type: Boolean,
      value: false
    },
    autoStart: {
      type: Boolean,
      value: false
    },
    label: {
      type: String,
      value: ''
    },
    status: {
      type: String,
      value: ''
    },
    showProgress: {
      type: Boolean,
      value: true
    },
    warnAt: {
      type: Number,
      value: 60
    },
    dangerAt: {
      type: Number,
      value: 15
    }
  },

  data: {
    display: '00:00',
    percent: 100,
    statusClass: '',
    statusText: '',
    progressStatus: ''
  },

  lifetimes: {
    attached() {
      this.totalSeconds = Math.max(0, this.properties.seconds);
      this.remainingSeconds = this.totalSeconds;
      this.updateDisplay();
      if (this.properties.autoStart || this.properties.running) {
        this.start();
      }
    },
    detached() {
      this.clearTimer();
    }
  },

  observers: {
    seconds(newSeconds) {
      this.totalSeconds = Math.max(0, newSeconds);
      if (!this.properties.running) {
        this.remainingSeconds = this.totalSeconds;
      }
      this.updateDisplay();
    },
    running(isRunning) {
      if (isRunning) {
        this.start();
      } else {
        this.stop();
      }
    },
    status() {
      this.updateStatus();
    }
  },

  methods: {
    start() {
      if (this.timer || this.remainingSeconds <= 0) {
        return;
      }
      this.clearTimer();
      this.timer = setInterval(() => {
        this.tick();
      }, 1000);
      this.updateStatus();
    },

    stop() {
      this.clearTimer();
    },

    reset(seconds) {
      this.totalSeconds = Math.max(0, seconds ?? this.properties.seconds);
      this.remainingSeconds = this.totalSeconds;
      this.updateDisplay();
      if (this.properties.autoStart || this.properties.running) {
        this.start();
      }
    },

    tick() {
      if (this.remainingSeconds <= 0) {
        this.finish();
        return;
      }
      this.remainingSeconds -= 1;
      this.updateDisplay();
      this.triggerEvent('tick', { remaining: this.remainingSeconds });
      if (this.remainingSeconds <= 0) {
        this.finish();
      }
    },

    finish() {
      this.clearTimer();
      this.remainingSeconds = 0;
      this.updateDisplay();
      this.triggerEvent('finish');
    },

    updateDisplay() {
      const minutes = Math.floor(this.remainingSeconds / 60);
      const seconds = this.remainingSeconds % 60;
      const display = `${minutes.toString().padStart(2, '0')}:${seconds
        .toString()
        .padStart(2, '0')}`;
      const percent =
        this.totalSeconds > 0
          ? Math.round((this.remainingSeconds / this.totalSeconds) * 100)
          : 0;
      this.setData({ display, percent });
      this.updateStatus();
    },

    updateStatus() {
      const explicitStatus = this.properties.status;
      let derivedStatus = explicitStatus;
      let statusText = '';

      if (!explicitStatus) {
        if (this.remainingSeconds <= this.properties.dangerAt) {
          derivedStatus = 'danger';
          statusText = '即将结束';
        } else if (this.remainingSeconds <= this.properties.warnAt) {
          derivedStatus = 'warning';
          statusText = '请加快速度';
        } else {
          derivedStatus = 'info';
          statusText = '计时中';
        }
      } else {
        statusText =
          explicitStatus === 'danger'
            ? '即将结束'
            : explicitStatus === 'warning'
            ? '请注意'
            : '计时中';
      }

      const statusClass =
        derivedStatus === 'danger'
          ? 'countdown--danger'
          : derivedStatus === 'warning'
          ? 'countdown--warning'
          : '';

      const progressStatus =
        derivedStatus === 'danger'
          ? 'error'
          : derivedStatus === 'warning'
          ? 'warning'
          : '';

      this.setData({
        statusClass,
        statusText,
        progressStatus
      });
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
});
